<template>
    <div>
        <div>
            <p style="text-align: left">作品管理</p>
            <div style=" border-bottom:1px solid grey; "></div>
            <div class="filter-top">
                <el-input v-model="userCode" placeholder="用户Id" style="width: 200px"></el-input>
                <el-button style="margin-left: 20px" @click="startQuery">查询</el-button>
            </div>
            <el-table :data="tableData" border style="padding: 1px;margin-top: 20px">
                <el-table-column prop="id" label="草稿id" width="200px">

                </el-table-column>
                <el-table-column label="预览图" width="150px">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.preViewUrl" @click="showPreview(scope.row)" style="width: 100%" lazy/>
                    </template>
                </el-table-column>
                <el-table-column prop="draftName" label="名称" width="200px">

                </el-table-column>

                <el-table-column prop="updateAt" label="创建时间" width="100px">
                </el-table-column>
                <el-table-column label="操作" width="300px">
                    <template slot-scope="scope">
                        <el-button @click="showSetTemplateDialog(scope.row)">设置为模版</el-button>
                        <el-button @click="delDraft(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 50px"
                    layout="prev, pager, next"
                    :page-size="10"
                    @current-change="queryDraft"
                    :total="totalPages">
            </el-pagination>
        </div>
        <el-dialog
                @close="openSrcoll()"
                title="预览模版"
                class="abow_dialog"
                :visible.sync="previewDraftDialog"
                width="30%"
                center>
            <el-image v-for="(item ,index) in previewUrlList " :key="index" :src="item" lazy></el-image>
        </el-dialog>
        <el-dialog
                :visible.sync="setTemplateDialogVisble"
                width="50%"
        >
            <div style="display: flex;flex-direction: column">
                <el-input class="input" v-model="selectDraftInfo.templateId"  disabled placeholder="模版ID"></el-input>
                <el-input class="input" v-model="selectDraftInfo.templateName" placeholder="模版名称"></el-input>
                <el-input class="input" v-model="selectDraftInfo.tradeId" placeholder="模版类型"></el-input>
                <div>
                    <el-button @click="closeSetTemplateDialog(true)">
                        确定
                    </el-button>
                    <el-button @click="closeSetTemplateDialog">
                        取消
                    </el-button>
                </div>
            </div>
        </el-dialog>


    </div>

</template>

<script>
    import request from '../request'

    // "id": 228,
    //     "draftName": "fileName1582110480460",
    //     "draftData": null,
    //     "draftImgs": "[\"http://lfmhdlresnew.mylafe.net/item-canvas1582110479664.png\"]",
    //     "updatedAt": 1582110482000


    export default {
        name: "Draft",

        data: function () {
            return {
                selectCategoryName: '推荐',
                selectItem: {
                    id: 1,
                    tradeId: "100",
                    parentId: "0",
                    tradeName: "推荐"
                },
                previewUrlList: [
                    'http://lfmhprodl.mylafe.com/1566560189247A25070506_0.png',
                    'http://lfmhprodl.mylafe.com/1566560189247A25070506_0.png',
                    'http://lfmhprodl.mylafe.com/1566560189247A25070506_0.png',
                ],
                previewDraftDialog: false,
                delDialog: false,
                setTemplateDialogVisble: false,
                tableData: [],
                pageIndex: 1,
                totalPages: 1,
                userCode: '',

                selectDraftInfo: {
                    templateId:'',
                    templateName:'',
                    tradeId:''
                },

            }
        },
        watch: {},
        methods: {
            handleClick: function (index) {
                console.log(index)
                this.selectCategoryName = this.templateTypeList[index].tradeName
                this.selectItem = {...this.templateTypeList[index]}
            },
            startQuery: function () {
                this.queryDraft(1, true)
            },
            queryDraft(pageIndex, isUpdateTotal) {
                request.get('draft/queryDrafts/' + this.userCode + '/' + pageIndex, (data) => {
                    if (isUpdateTotal) {
                        this.totalPages = data.totalNums
                    }
                    this.tableData = data.userDraftDTOS.map(item => {
                        return {
                            ...item,
                            preViewUrl: JSON.parse(item.draftImgs)[0]
                        }
                    })
                });
            },
            addTemplate: function () {
                alert('添加' + this.selectItem.name)
            },
            showSetTemplateDialog: function (draftInfo) {
                this.selectDraftInfo.templateId = draftInfo.id
                this.selectDraftInfo.templateName=draftInfo.draftName
                this.setTemplateDialogVisble = true
                console.log(this.selectDraftInfo)
            },
            closeSetTemplateDialog(isCommit) {
                if (isCommit){
                    request.get('draft/queryDraftById/'+this.selectDraftInfo.templateId,(draftInfo)=>{
                       let commitData={
                           needVip: 0,
                           templateData: draftInfo.draftData,
                           templateId:-1,
                           templateImgs: draftInfo.draftImgs,
                           templateName:this.selectDraftInfo.templateName,
                           templatePages: JSON.parse(draftInfo.draftImgs).length,
                           tradeId: this.selectDraftInfo.tradeId
                       }
                      request.postWithJson('template/addOrUpdateTemplate',commitData,()=>{
                          alert("上传成功")
                          this.setTemplateDialogVisble = false
                      })
                    })
                }

            },
            delDraft: function (draftInfo) {
                console.log(draftInfo)
                this.delDialog = true
            },
            showPreview: function (draftInfo) {
                this.previewDraftDialog = true
                this.previewUrlList = JSON.parse(draftInfo.draftImgs)
            },
            handleDelDialogClick(isDel) {
                if (isDel) {
                    alert("删除")
                }
                this.delDialog = false
            },
            handleEditDialogClick(isEdit) {
                if (isEdit) {
                    alert("修改")
                }
                this.setTemplateDialogVisble = false
            },
            openSrcoll() {
                var mo = function (e) {
                    e.preventDefault();
                };
                document.body.style.overflow = '';//出现滚动条
                document.removeEventListener("touchmove", mo, false);
            },


        }
    }
</script>

<style scoped>
    .filter-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 20px;
    }

    li {
        list-style: none
    }

    ul {
        padding-inline-start: 5px;
        padding-inline-end: 5px;

    }

    .input {
        margin: 10px;
    }

</style>
<style lang="scss">
    .abow_dialog {
        display: flex;
        justify-content: center;
        align-items: Center;
        overflow: hidden;

        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
            font-size: 0px;
        }

        .el-dialog {
            margin: 0 auto !important;
            height: 90%;
            overflow: hidden;
        }
    }
</style>
